<template>
  <div class="main">
    <a-form
      id="formLogin"
      class="user-layout-login"
      ref="formLogin"
      :form="form"
      @submit="handleSubmit"
    >
      <a-tabs
        :activeKey="customActiveKey"
        :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
        @change="handleTabClick"
      >
        <a-tab-pane key="login" tab="登录">
          <a-alert
            v-if="isLoginError"
            type="error"
            showIcon
            style="margin-bottom: 24px;"
            message="手机号码或密码错误"
          />
          <a-form-item>
            <!-- pattern: /^1[34578]\d{9}$/, -->
            <a-input
              size="large"
              type="text"
              maxlength="11"
              placeholder="手机号码"
              v-decorator="[
                'account',
                {
                  rules: [{ required: true, message: '请输入正确的手机号' }],
                  validateTrigger: ['change', 'blur']
                }
              ]"
            >
              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input>
          </a-form-item>

          <a-form-item>
            <a-input
              size="large"
              type="password"
              autocomplete="false"
              placeholder="密码"
              v-decorator="[
                'password',
                {
                  rules: [{ required: true, message: '请输入密码' }],
                  validateTrigger: ['change', 'blur']
                }
              ]"
            >
              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input>
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane key="register" tab="注册">
          <a-form-item>
            <a-input
              size="large"
              placeholder="手机号码"
              v-decorator="[
                'phone',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入正确的手机号',
                      pattern: /^1[3456789]\d{9}$/
                    }
                  ],
                  validateTrigger: ['change', 'blur']
                }
              ]"
            >
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              size="large"
              type="password"
              autocomplete="false"
              placeholder="至少6位密码"
              v-decorator="[
                'newPwd',
                {
                  rules: [
                    { required: true, message: '至少6位密码' },
                    { validator: handlePasswordLevel }
                  ],
                  validateTrigger: ['change', 'blur']
                }
              ]"
            ></a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              size="large"
              type="password"
              autocomplete="false"
              placeholder="确认密码"
              v-decorator="[
                'rePwd',
                {
                  rules: [
                    { required: true, message: '至少6位密码' },
                    { validator: handlePasswordCheck }
                  ],
                  validateTrigger: ['change', 'blur']
                }
              ]"
            ></a-input>
          </a-form-item>
          <a-form-item>
            <a-checkbox v-decorator="['agreement', { valuePropName: 'checked' }]">
              我已阅读并同意
              <a href="#/rule" target="_blank">
                《平台用户隐私协议》
              </a>
            </a-checkbox>
          </a-form-item>
        </a-tab-pane>
      </a-tabs>

      <a-form-item v-if="customActiveKey === 'login'">
        <a-tooltip style="color: #40a9ff;">
          <template slot="title"> 请联系平台管理员重置密码，联系方式：{{ contactPhone }} </template>
          忘记密码
        </a-tooltip>
        <!-- <a-checkbox v-decorator="['rememberMe', { valuePropName: 'checked' }]"
          >自动登录</a-checkbox
        >
        <router-link
          :to="{ name: 'recover', params: { user: 'aaa' } }"
          class="forge-password"
          style="float: right;"
          >忘记密码</router-link
        > -->
      </a-form-item>

      <a-form-item style="margin-top:24px">
        <a-button
          size="large"
          type="primary"
          htmlType="submit"
          class="login-button"
          :loading="state.loginBtn"
          :disabled="state.loginBtn"
          >{{ customActiveKey === "login" ? "登录" : "注册并登录" }}</a-button
        >
      </a-form-item>
    </a-form>
    <div class="copyright">
      <p style="margin-bottom: 10px;">
        备案号：<a href="https://beian.miit.gov.cn" target="_blank">赣ICP备2021007133号</a>
      </p>
      <p>公安联网备案号：<a href="https://beian.gov.cn" target="_blank">36112402000115号</a></p>
    </div>
  </div>
</template>

<script>
import { timeFix } from "@/utils/util";

export default {
  data() {
    return {
      contactPhone: this.$config.contactPhone,
      customActiveKey: "login",
      loginBtn: false,
      isLoginError: false,
      stepCaptchaVisible: false,
      form: this.$form.createForm(this),
      state: {
        time: 60,
        loginBtn: false,
        smsSendBtn: false
      }
    };
  },
  created() {},
  methods: {
    // handler
    handlePasswordLevel(rule, value, callback) {
      if (value.length < 6) {
        callback(new Error("密码长度不够"));
      } else {
        callback();
      }
    },
    handlePasswordCheck(rule, value, callback) {
      const password = this.form.getFieldValue("newPwd");
      if (value === undefined) {
        callback(new Error("请输入密码"));
      }
      if (value && password && value.trim() !== password.trim()) {
        callback(new Error("两次密码不一致"));
      }
      callback();
    },
    handleTabClick(key) {
      this.customActiveKey = key;
      // this.form.resetFields()
    },
    handleSubmit(e) {
      console.log(this.customActiveKey);
      e.preventDefault();
      const {
        form: { validateFields },
        state,
        customActiveKey
      } = this;

      const validateFieldsKey =
        customActiveKey === "login"
          ? ["account", "password"]
          : ["phone", "newPwd", "rePwd", "agreement"];
      // 登录
      if (customActiveKey === "login") {
        validateFields(validateFieldsKey, { force: true }, (err, values) => {
          if (!err) {
            state.loginBtn = true;
            const loginParams = { ...values, sysType: this.$config.sysType };
            console.log(loginParams);
            loginParams.password = values.password;
            this.$http
              .post("/users/login", loginParams)
              .then((res) => {
                if (res.success) {
                  this.loginSuccess(res);
                } else {
                  this.$message.error(res.message);
                }
              })
              .catch((err) => this.requestFailed(err))
              .finally(() => {
                state.loginBtn = false;
              });
          } else {
            setTimeout(() => {
              state.loginBtn = false;
            }, 600);
          }
        });
      }
      console.log(validateFieldsKey);
      // 注册
      if (customActiveKey === "register") {
        validateFields(validateFieldsKey, { force: true }, (err, values) => {
          if (!values.agreement) {
            this.$message.error("请阅读并同意《平台用户隐私协议》");
            return;
          }
          if (!err) {
            state.loginBtn = true;
            const loginParams = { ...values, sysType: this.$config.sysType };
            this.$http
              .post("/users/new-user", loginParams)
              .then((res) => {
                if (res.success) {
                  this.loginSuccess(res);
                } else {
                  this.$message.error(res.message);
                }
              })
              .catch((err) => this.requestFailed(err))
              .finally(() => {
                state.loginBtn = false;
              });
          } else {
            setTimeout(() => {
              state.loginBtn = false;
            }, 600);
          }
        });
      }
    },
    stepCaptchaSuccess() {
      this.loginSuccess();
    },
    stepCaptchaCancel() {
      this.Logout().then(() => {
        this.loginBtn = false;
        this.stepCaptchaVisible = false;
      });
    },
    loginSuccess(res) {
      let token = "Bearer " + res.model.token;
      localStorage.setItem("token", token);
      this.$router.push({ path: "/" });
      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        this.$notification.success({
          message: "欢迎",
          description: `${timeFix()}，欢迎回来`
        });
      }, 1000);
      this.isLoginError = false;
    },
    requestFailed(err) {
      this.isLoginError = true;
      this.$notification["error"]({
        message: "错误",
        description: ((err.response || {}).data || {}).message || "请求出现错误，请稍后再试",
        duration: 4
      });
    }
  }
};
</script>

<style lang="less" scoped>
.user-layout-login {
  label {
    font-size: 14px;
  }

  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }

  .forge-password {
    font-size: 14px;
  }

  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }

  .user-login-other {
    text-align: left;
    margin-top: 24px;
    line-height: 22px;

    .item-icon {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.2);
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #1890ff;
      }
    }

    .register {
      float: right;
    }
  }
}
.copyright {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
